<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PDA条码扫描器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            font-size: 24px;
            text-align: center;
        }
        
        .scanner-container {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }
        
        #barcodeInput {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        #barcodeInput:focus {
            border-color: #007bff;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        button {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: 500;
        }
        
        #scanButton {
            background-color: #007bff;
            color: white;
        }
        
        #scanButton:hover {
            background-color: #0056b3;
        }
        
        #clearButton {
            background-color: #6c757d;
            color: white;
        }
        
        #clearButton:hover {
            background-color: #545b62;
        }
        
        .result-container {
            margin-top: 20px;
        }
        
        h2 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
        }
        
        #scanResult {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            min-height: 60px;
            word-break: break-all;
        }
        
        .scan-history {
            margin-top: 20px;
        }
        
        #historyList {
            list-style: none;
            max-height: 200px;
            overflow-y: auto;
        }
        
        #historyList li {
            background-color: #f8f9fa;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 6px;
            font-size: 14px;
            border-left: 3px solid #007bff;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #28a745;
            margin-right: 8px;
        }
        
        .scan-info {
            background-color: #e7f3ff;
            padding: 10px;
            border-radius: 6px;
            margin-top: 10px;
            font-size: 14px;
            color: #004085;
        }
        
        /* 适应PDA设备的特殊样式 */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            
            .scanner-container {
                padding: 20px;
            }
            
            #barcodeInput {
                padding: 12px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <h1>PDA条码扫描器</h1>
    
    <div class="scanner-container">
        <div class="input-group">
            <label for="barcodeInput">条码输入框</label>
            <input 
                type="text" 
                id="barcodeInput" 
                placeholder="请扫描条码或手动输入"
                autofocus
            >
        </div>
        
        <div class="action-buttons">
            <button id="scanButton">开始扫描</button>
            <button id="clearButton">清除输入</button>
        </div>
        
        <div class="scan-info">
            <span class="status-indicator"></span>
            已准备好接收扫描输入
        </div>
        
        <div class="result-container">
            <h2>扫描结果</h2>
            <div id="scanResult">等待扫描...</div>
        </div>
        
        <div class="scan-history">
            <h2>扫描历史</h2>
            <ul id="historyList"></ul>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const barcodeInput = document.getElementById('barcodeInput');
        const scanButton = document.getElementById('scanButton');
        const clearButton = document.getElementById('clearButton');
        const scanResult = document.getElementById('scanResult');
        const historyList = document.getElementById('historyList');
        const statusIndicator = document.querySelector('.status-indicator');
        const scanInfo = document.querySelector('.scan-info');
        
        // 历史记录数组
        let scanHistory = [];
        
        // 自动聚焦到输入框
        function focusInput() {
            barcodeInput.focus();
        }
        
        // 初始化时聚焦
        window.addEventListener('load', focusInput);
        window.addEventListener('touchstart', focusInput); // 触摸屏幕时重新聚焦
        
        // 处理条码输入事件
        barcodeInput.addEventListener('input', function() {
            if (this.value.trim()) {
                processScan(this.value.trim());
            }
        });
        
        // 监听键盘事件，大多数扫码枪会自动添加回车键
        barcodeInput.addEventListener('keydown', function(event) {
            // 回车键（通常扫码枪会自动发送）
            if (event.key === 'Enter' && this.value.trim()) {
                processScan(this.value.trim());
                event.preventDefault(); // 阻止表单提交
            }
        });
        
        // 处理扫描数据
        function processScan(barcode) {
            // 更新状态和结果
            scanResult.textContent = barcode;
            scanResult.style.backgroundColor = '#d4edda';
            scanResult.style.borderColor = '#c3e6cb';
            
            // 更新状态指示器
            statusIndicator.style.backgroundColor = '#28a745'; // 绿色
            scanInfo.textContent = '✅ 扫描成功';
            
            // 添加到历史记录
            addToHistory(barcode);
            
            // 模拟扫描成功后的延时
            setTimeout(() => {
                // 可选：自动清空输入框以便下次扫描
                // barcodeInput.value = '';
                barcodeInput.focus();
            }, 500);
        }
        
        // 添加到历史记录
        function addToHistory(barcode) {
            const timestamp = new Date().toLocaleTimeString();
            scanHistory.unshift({ barcode, timestamp });
            
            // 保持最多显示5条历史记录
            if (scanHistory.length > 5) {
                scanHistory.pop();
            }
            
            // 更新历史记录UI
            updateHistoryUI();
        }
        
        // 更新历史记录UI
        function updateHistoryUI() {
            historyList.innerHTML = '';
            scanHistory.forEach(item => {
                const li = document.createElement('li');
                li.innerHTML = `${item.timestamp}: ${item.barcode}`;
                historyList.appendChild(li);
            });
        }
        
        // 开始扫描按钮事件
        scanButton.addEventListener('click', function() {
            barcodeInput.value = '';
            barcodeInput.focus();
            
            // 更新状态
            scanResult.textContent = '等待扫描...';
            scanResult.style.backgroundColor = '#f8f9fa';
            scanResult.style.borderColor = '#dee2e6';
            
            statusIndicator.style.backgroundColor = '#28a745'; // 绿色
            scanInfo.textContent = '已准备好接收扫描输入';
        });
        
        // 清除按钮事件
        clearButton.addEventListener('click', function() {
            barcodeInput.value = '';
            scanResult.textContent = '等待扫描...';
            scanResult.style.backgroundColor = '#f8f9fa';
            scanResult.style.borderColor = '#dee2e6';
            barcodeInput.focus();
        });
        
        // 防止页面滚动时失去焦点
        document.addEventListener('scroll', function() {
            if (document.activeElement !== barcodeInput) {
                barcodeInput.focus();
            }
        });
        
        // 监听页面可见性变化
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                barcodeInput.focus();
            }
        });
        
        // 适配PDA设备的特殊处理
        function isPDADevice() {
            // 简单检测：根据屏幕尺寸和用户代理
            const hasTouch = 'ontouchstart' in window;
            const isSmallScreen = window.innerWidth <= 768;
            return hasTouch && isSmallScreen;
        }
        
        // 如果是PDA设备，添加额外的优化
        if (isPDADevice()) {
            // 禁用双击缩放
            document.addEventListener('dblclick', function(e) {
                e.preventDefault();
            });
            
            // 禁用长按选择
            barcodeInput.addEventListener('touchstart', function(e) {
                e.preventDefault();
                this.focus();
            });
        }
    </script>
</body>
</html>